<template>
	<view class="login-container">
		<!-- 背景渐变 -->
		<view class="background"></view>

		<!-- 登录表单 -->
		<view class="login-form animated fadeInUp">
			<!-- 欢迎文案 -->
			<view class="welcome">
				<text class="welcome-title">商家管理系统</text>
				<text class="welcome-subtitle">请登录您的账号</text>
			</view>

			<!-- 用户名输入框 -->
			<u-input
				v-model="form.username"
				placeholder="请输入用户名"
				prefixIcon="account"
				prefixIconStyle="font-size: 22px; color: #666;"
				shape="circle"
				clearable
				:border="isUsernameFocused ? 'primary' : 'none'"
				@focus="isUsernameFocused = true"
				@blur="isUsernameFocused = false"
				class="input-item"
			/>

			<!-- 密码输入框 -->
			<u-input
				v-model="form.password"
				placeholder="请输入密码"
				prefixIcon="lock"
				prefixIconStyle="font-size: 22px; color: #666;"
				shape="circle"
				password
				clearable
				:border="isPasswordFocused ? 'primary' : 'none'"
				@focus="isPasswordFocused = true"
				@blur="isPasswordFocused = false"
				class="input-item"
			/>

			<!-- 记住密码和忘记密码 -->
			<view class="form-options">
				<u-checkbox-group>
					<u-checkbox checked="rememberPassword" label="记住密码" />
				</u-checkbox-group>
				<text class="forgot-password" @click="handleForgotPassword">忘记密码？</text>
			</view>

			<!-- 登录按钮 -->
			<u-button
				type="primary"
				shape="circle"
				:text="loading ? '登录中...' : '登录'"
				:loading="loading"
				:disabled="!isFormValid"
				@click="handleLogin"
				class="login-button"
			/>
		</view>

		<!-- 底部版权信息 -->
		<view class="footer">
			<text class="copyright">© 2023 Your Company. All rights reserved.</text>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import httpUrl from '@/config';

// 表单数据
const form = ref({
	username: '',
	password: '',
});
const rememberPassword = ref(true);
const loading = ref(false);
const isUsernameFocused = ref(false);
const isPasswordFocused = ref(false);

// 表单验证
const isFormValid = computed(() => {
	return form.value.username.trim() && form.value.password.trim();
});

// 页面加载时检查保存的登录信息
onMounted(() => {
	const rememberedUsername = uni.getStorageSync('rememberedUsername');
	const rememberedPassword = uni.getStorageSync('rememberedPassword');

	if (rememberedUsername && rememberedPassword) {
		form.value.username = rememberedUsername;
		form.value.password = rememberedPassword;
		rememberPassword.value = true; // 自动勾选“记住密码”
	}
});

// 处理登录
const handleLogin = () => {
	if (!isFormValid.value) {
		uni.showToast({
			title: '请输入用户名和密码',
			icon: 'none',
		});
		return;
	}
	let tenantName = '';
	if (form.value.username.trim()) {
		if (form.value.username.trim() === 'admin') {
			tenantName = '株洲社区商城';
		} else {
			tenantName = form.value.username.trim();
		}
	}
	uni.request({
		url: httpUrl.baseUrl + '/system/tenant/get-id-by-name?name=' + tenantName,
		method: 'GET',
		success: (res) => {
			if (res.data.code === 0) {
				let tenantId = res.data.data;
				uni.setStorageSync('tenantId', tenantId);

				uni.request({
					url: httpUrl.baseUrl + '/system/auth/login',
					method: 'POST',
					data: {
						username: form.value.username.trim(),
						password: form.value.password.trim(),
					},
					header: {
						'Content-Type': 'application/json',
						'Tenant-Id': tenantId,
					},
					success: (res) => {
						if (res.data.code === 0) {
							// 登录成功
							uni.setStorageSync('userId', res.data.data.userId);
							uni.setStorageSync('accessToken', res.data.data.accessToken);
							uni.setStorageSync('refreshToken', res.data.data.refreshToken);
							uni.setStorageSync('expiresTime', res.data.data.expiresTime);

							// 如果用户勾选了“记住密码”，保存用户名和密码
							if (rememberPassword.value) {
								uni.setStorageSync('rememberedUsername', form.value.username.trim());
								uni.setStorageSync('rememberedPassword', form.value.password.trim());
							} else {
								// 如果未勾选，清除保存的用户名和密码
								uni.removeStorageSync('rememberedUsername');
								uni.removeStorageSync('rememberedPassword');
							}

							loading.value = true;
							setTimeout(() => {
								loading.value = false;
								uni.showToast({
									title: '登录成功',
									icon: 'success',
								});
								uni.navigateTo({
									url: '/pages/index/index',
								});
							}, 2000);
						} else {
							console.log('请求失败:', res.data);
						}
					},
					fail: (err) => {
						console.error('请求失败:', err);
					},
				});
			} else {
				console.log('请求失败:', res.data);
			}
		},
		fail: (err) => {
			console.error('请求失败:', err);
		},
	});
};

// 处理忘记密码
const handleForgotPassword = () => {
	uni.showToast({
		title: '请联系管理员重置密码',
		icon: 'none',
	});
};
</script>

<style scoped>
/* 样式保持不变 */
</style>

<style scoped>
/* 页面容器 */
.login-container {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

/* 背景渐变 */
.background {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #6a11cb, #2575fc);
	z-index: -1;
}

/* 登录表单 */
.login-form {
	width: 90%;
	max-width: 400px;
	padding: 30px;
	background-color: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* 欢迎文案 */
.welcome {
	text-align: center;
	margin-bottom: 30px;
}
.welcome-title {
	font-size: 24px;
	font-weight: bold;
	color: #333;
	display: block;
}
.welcome-subtitle {
	font-size: 14px;
	color: #666;
	display: block;
	margin-top: 5px;
}

/* 输入框样式 */
.input-item {
	margin-bottom: 20px;
}

/* 记住密码和忘记密码 */
.form-options {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}
.forgot-password {
	font-size: 14px;
	color: #666;
	cursor: pointer;
}
.forgot-password:hover {
	color: #2575fc;
}

/* 登录按钮 */
.login-button {
	width: 100%;
	height: 45px;
	font-size: 16px;
	margin-top: 20px;
}

/* 第三方登录 */
.third-party-login {
	margin-top: 30px;
	text-align: center;
}
.third-party-title {
	font-size: 14px;
	color: #666;
	margin-bottom: 10px;
}
.third-party-buttons {
	display: flex;
	justify-content: center;
	gap: 20px;
}
.third-party-button {
	width: 50px;
	height: 50px;
	border-radius: 50%;
}

/* 注册提示 */
.register-tip {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: #666;
}
.register-link {
	color: #2575fc;
	cursor: pointer;
}
.register-link:hover {
	text-decoration: underline;
}

/* 底部版权信息 */
.footer {
	position: absolute;
	bottom: 20px;
	left: 0;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #666;
}

/* 动画效果 */
@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
.animated {
	animation-duration: 0.5s;
	animation-fill-mode: both;
}
.fadeInUp {
	animation-name: fadeInUp;
}
</style>
